<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="app">
        <p v-memo="[]">count:{{count}}</p>
        <p>count:{{count}}</p>
        <p v-memo="[count]">count:{{count}}</p>
        <button @click="count++">count++</button>

        <!-- v-memo 与v-for 一起使用 -->
        <ul>
            <li v-for="item in list" :key="item.id">{{item.desc}}--{{item.id===selected}}
            </li>
        </ul>
        <button @click=" selected++">selecetd++:{{selected}}</button>
    </div>

</body>

</html>
<script>
    // v-memo: 
    // 该指令时vue3新增的指令, vue2 没有该指令
    // 主要用于性能优化使用,(不常用)
    // 01: v-memo='[]' 表示数组中没有依赖的值, 也就是说依赖的值没有发生变化, 那么绑定
    // 当前指令v-memo='[]'的dom 节点不会更新  等价于 v-once

    // 02: v-memo=[变量,....] , 当变量发生变化, 绑定当前指令的dom节点就会更新

    // 当渲染的dom 比较多的时候, 如上案例, 当selected++ 的时候, 然后加入渲染了1000个li,
    // 然后势必vue会初始化创建1000虚拟dom, 
    // let vnode = {
    //     tag: ul,
    //     attrs: {},
    //     children: [
    //         { tag: 'li', attrs: { key: 1 }, },
    //         { tag: 'li', attrs: { key: 1 }, },
    //         { tag: 'li', attrs: { key: 1 }, }, ,
    //         ...
    //      ]
    // }

    // 当selected++时候, 又创建了1000 虚拟dom 
    // let vnode = {
    //     tag: ul,
    //     attrs: {},
    //     children: [
    //         { tag: 'li', attrs: { key: 1 }, },
    //         { tag: 'li', attrs: { key: 1 }, },
    //         { tag: 'li', attrs: { key: 1 }, }, ,
    //         ...
    //      ]
    // }
    // 新旧虚拟dom 比较 , 只更新变化的部分 , 

    // 当使用v-memo 时候, 不会重新创建对应的虚拟dom, 998dom 使用之前的虚拟dom ,
    // 不会重新创建.  


    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                count: 100,
                selected: 1, // 选中的变量
                list: [
                    {
                        id: 1,
                        desc: '一起看电影'
                    },
                    {
                        id: 2,
                        desc: '一起餐厅餐饭'
                    },
                    {
                        id: 3,
                        desc: '一起旅游'
                    },
                    {
                        id: 4,
                        desc: '一起医院'
                    }
                ]
            }
        }
    }).mount('#app')


</script>